<template>
  <div>
    <div style="margin-top: 20px;padding: 20px;background-color: #FFFFFF">
      <a-form-model ref="ruleForm" layout="inline" :model="form">
        <div class="mode_item">
          <div>
            <a-form-model-item label="创建人" prop="usageStatus">
              <a-select v-model="form.createName" style="width: 200px" placeholder="请选择">
                <a-select-option v-for="(item,index) of li" :value="item" :key="index">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="模板名称" prop="templateName">
              <a-input v-model="form.templateName" placeholder="请输入"/>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询</a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置</a-button>
            </a-form-model-item>
          </div>
        </div>
      </a-form-model>

    </div>
    <div style="margin-top: 20px;padding: 20px;background-color: #FFFFFF">
      <div style="padding-bottom: 15px">
        <!--          <a-button @click="showModal">导入</a-button>-->
        <a-button type="primary" @click="manageBtn">新增模板</a-button>
        <!--          <a-button type="primary" style="margin-left: 10px;" @click="upload">事件上报</a-button>-->
      </div>
      <custom-table
        ref="table"
        :showAlert="false"
        :columns="columns"
        :dataSource="pageData"
        :showSelection="false"
        :showPagination="true"
        rowKey="warningEvtid"
        :loading="loading"
        @change="onTableChange"
      >
        <template slot="caozuo" slot-scope="text, record">
          <a style="padding: 0 5px" @click="onView2(record)">编辑</a>
        </template>
      </custom-table>
    </div>
  </div>
</template>

<script>
import CustomTable from '@/components/zxd/Table/CustomTable'
import {queryAll, textList} from "@api/wxSmuggle/system";

export default {
  name: "index",
  components: { CustomTable },
  data(){
    return {
      visible:false,
      rangePickerTime: [],
      li:[],
      form:{

      },
      form1:{},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          scopedSlots: { customRender: 'order' },
          align: 'center',
          width: 60,
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '模板名称',
          dataIndex: 'templateName',
          scopedSlots: { customRender: 'templateName' }
        },
        {
          title: '创建人',
          dataIndex: 'createName',
          scopedSlots: { customRender: 'createName' }
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '最后修改时间',
          dataIndex: 'updateTime',
          scopedSlots: { customRender: 'updateTime' }
        },
        {
          title: '操作',
          dataIndex: 'caozuo',
          scopedSlots: { customRender: 'caozuo' }
        },
      ],
      pageData: {},
      loading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pass:undefined
    }
  },
  mounted() {
    this.refreshTable(this.pageFilter)
    queryAll().then(ser => {
      console.log(ser)
      this.li = ser.result
    })
  },
  watch:{
    form:{
      deep:true,
      handler(a,b){
        this.pageFilter.pageNo = 1
      }
    }
  },
  methods:{

    onView2(val){
      console.log(val)
      this.$router.push({
        path:'/isystem/templetSet',
        query:{
          id:val.id,
          item:'false'
        }
      })
    },

    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        console.log(valid)
        // this.passCheck = valid
        this.pass = valid
      });
    },
    onQuery(){
      this.refreshTable(Object.assign({},this.form,this.pageFilter))
    },
    onResetForm(){
      delete this.form.timeType
      this.$refs.ruleForm.resetFields();
      this.refreshTable(this.pageFilter)
    },
    manageBtn(){
      this.$router.push({
        path:'/isystem/templetSet',
        query:{
          item:'3'
        }
      })
    },



    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({},this.pageFilter, paginations)
      this.refreshTable(Object.assign({},this.form,this.pageFilter))
    },
    refreshTable(val){
      textList(val).then(ser => {
        console.log(ser)
        if(ser.success){
          this.pageData = ser.result
        }
      })
    },
  }
}
</script>

<style scoped>
/deep/.ant-select-selection--single{
  width: 200px!important;
}
</style>